<template>
    <div class="bg">
        <div class="logn-in">
            <div class="sign-message">
                <h1>欢迎注册超级管理员账户</h1>
                <h3>母婴销售系统后台管理平台</h3>
            </div>
            <div class="sign-form">
                <el-form>
                    <el-input style="margin-bottom: 20px; margin-left:30px;  width: 400px;" v-model="formData.account" @input="inspect" placeholder="请输入账号,纯数字组成"></el-input>
                    <br>
                    <span v-show="errCode == 1">账号为纯数字组成</span>
                    <span v-show="errCode == 4">账号已存在</span>
                    <el-input style="margin-bottom: 20px; margin-left:30px;  width: 400px;" type="password" max-length="8" v-model="formData.password" placeholder="请输入密码"></el-input>
                    <br>
                    <span v-show="errCode == 2">密码不为空</span>
                    <el-input style="margin-bottom: 20px; margin-left:30px;  width: 400px;" v-model="formData.key" type="password" placeholder="请输入注册权限密码"></el-input>
                    <br>
                    <span v-show="errCode == 3">权限密码不为空</span><br>
                    <el-button style="margin: 0 30px;" type="primary" @click="register" :disabled="unable">注册</el-button>
                    <ul>
                        <li><a href="javascript: void(0)" @click="signIn">已有账号，登录</a></li>
                    </ul>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {sendwithpost} from "../../../network/profile";
    import {debounce} from "../../../common/util";

    export default {
        name: "BusinessRegister",
        data() {
            return {
                formData: {
                    account: null,
                    password: '',
                    key: ''
                },
                errCode: null,
                unable: false
            }
        },
        methods: {
            register() {
                let isNumber = /^[0-9]*[1-9][0-9]*$/
                if (!isNumber.test(this.formData.account)) {
                    this.errCode = 1
                }else if (this.formData.password.length == 0) {
                    this.errCode = 2
                }else if (this.formData.key.length == 0) {
                    this.errCode = 3
                } else {
                    sendwithpost({
                        url: '/Superregister',
                        data: this.formData
                    }).then(res=> {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: res.data.type
                        })
                        if (res.data.res_code == 2) {
                            this.$router.push({path: '/business/signIn'})
                        }else {
                            return
                        }
                    })
                }
            },
            inspect() {
                debounce(sendwithpost({
                    url: '/inspect',
                    data: {
                        account: this.formData.account
                    }
                }).then(res=> {
                    if (res.data.res_code == 1) {
                        this.errCode = 4
                        this.unable = true
                    }else {
                        this.errCode = null
                        this.unable = false
                    }
                }))

            },
            signIn() {
                this.$router.push({path: '/business/signIn'})
            }
        }
    }
</script>

<style scoped>
    .bg {
        height: 100vh;
        background-image: url('../../../assets/img/common/businessbg.png');
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }
    .logn-in {
        width: 1100px;
        margin: 0 auto;
        display: flex;
        height: 70vh;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .logn-in > * {
        flex: 1;
        padding-top: 200px;
    }
    .sign-message {
        background-color: #7165DC;
        color: #ffffff;
    }
    .sign-message h1 {
        font-weight: bold;
    }
    .sign-form {
        background-color: #fff;
    }
    .sign-form > *, .sign-message > * {
        margin: 40px;
    }
    .sign-form span {
        color: red;
        font-size: 12px;
        margin-left: 30px;
    }
    .sign-form ul {
        list-style: none;
        line-height: 2em;
        font-size: 14px;
    }
</style>